<template>
  <!-- <vuescroll> -->
  <div class="epidemicrisk_content">
    <!-- <vuescroll> -->
    <div class="cl">
      <h3 class="banner_A" @click="goEpidemicMsg">
        <div class="icon el-icon-message-solid"></div>
        <!-- 轮播 -->
        <el-carousel height="40px" indicator-position="none" arrow="never">
          <el-carousel-item v-for="item in tip" :key="item.id">
            <div class="msg" style="color:#333;font-weight:normal">
              <!-- <span class="p-project" style="color:#333">
                    {{
                    item.parentProjectName
                    }}
                  </span>
                  <span class="c-project" style="color:#333">
                    {{
                    item.subProjName
              }}-->
              <!-- </span> -->
              {{ item.riskMsg }}
            </div>
          </el-carousel-item>
        </el-carousel>
      </h3>
      <div class="fourBox fourBox1">
        <ProjectPer></ProjectPer>
      </div>
      <div class="fourBox fourBox2">
        <Kaoqinpie></Kaoqinpie>
      </div>
      <div class="fourBox fourBox2">
        <Epidemicriskpie></Epidemicriskpie>
      </div>

      <!-- <div class="fourBox">
        <Builders></Builders>
      </div>-->
      <div class="fourBox">
        <ProjectPerkaoqin></ProjectPerkaoqin>
      </div>
      <div class="fourBox">
        <Builderskaoqin></Builderskaoqin>
      </div>
    </div>
    <h4 class="fourButton cl">
      <div
        class="checkBtn checkBtn0"
        @click="checkBtn(1)"
        v-bind:class="{
            ischeck: 1 == current
          }"
      >项目公司人员实名制</div>
      <div
        class="checkBtn checkBtn1"
        @click="checkBtn(3)"
        v-bind:class="{
            ischeck: 3 == current,
            ischeck1: 3 == current
          }"
      >项目公司人员考勤详情</div>
      <div
        class="checkBtn checkBtn2"
        @click="checkBtn(4)"
        v-bind:class="{
            ischeck: 4 == current,
            ischeck2: 4 == current
          }"
      >建设单位疫情信息</div>
    </h4>
    <div class="info_table" v-if="table1">
      <List1></List1>
    </div>
    <!-- <div class="info_table" v-if="table2">
      <List2></List2>
    </div>-->
    <div class="info_table" v-if="table3">
      <List3></List3>
    </div>
    <div class="info_table" v-if="table4">
      <List4></List4>
    </div>
    <!-- </vuescroll> -->
  </div>
  <!-- </vuescroll> -->
</template>
<style lang="scss" scoped>
@import "@/style/epidemicrisk/epidemicrisk.scss";
</style>

<script>
// import vuescroll from "vuescroll";
import Kaoqinpie from "@/components/epidemicrisk/epidemicrisk_kaoqinpie.vue";
import Epidemicriskpie from "@/components/epidemicrisk/epidemicrisk_pie.vue";
import ProjectPer from "@/components/epidemicrisk/epidemicrisk_projectper.vue";
// import Builders from "@/components/epidemicrisk/epidemicrisk_builders.vue";
import ProjectPerkaoqin from "@/components/epidemicrisk/epidemicrisk_projectperkaoqin.vue";
import Builderskaoqin from "@/components/epidemicrisk/epidemicrisk_builderskaoqin.vue";
import List1 from "@/components/epidemicrisk/list/project_perinfo.vue";
// import List2 from "@/components/epidemicrisk/list/builders_info.vue";
import List3 from "@/components/epidemicrisk/list/project_kaoqininfo.vue";
import List4 from "@/components/epidemicrisk/list/builders_kaoqininfo.vue";

import { rotation } from "../../service/epidemicrisk/carousel.js";
export default {
  components: {
    Epidemicriskpie,
    Kaoqinpie,
    ProjectPer,
    // Builders,
    ProjectPerkaoqin,
    Builderskaoqin,
    List1,
    // List2,
    List3,
    List4

    // vuescroll
  },
  data() {
    return {
      table1: true,
      table2: false,
      table3: false,
      table4: false,
      tip: [], //轮播
      current: 1
    };
  },
  mounted() {
    this.checkBtn(4);
    this.checkBtn(1);
  },
  created() {
    rotation().then(res => {
      this.tip = res.data.obj;
    });
  },
  methods: {
    //轮播图
    goEpidemicMsg() {
      this.$router.push({ path: "/EpidemicMsg" });
    },
    //选项卡
    checkBtn(num) {
      this.current = num;
      if (num === 1) {
        this.table1 = true;
        this.table2 = false;
        this.table3 = false;
        this.table4 = false;
      } else if (num === 2) {
        this.table1 = false;
        this.table2 = true;
        this.table3 = false;
        this.table4 = false;
      } else if (num === 3) {
        this.table1 = false;
        this.table2 = false;
        this.table3 = true;
        this.table4 = false;
      } else if (num === 4) {
        this.table1 = false;
        this.table2 = false;
        this.table3 = false;
        this.table4 = true;
      }
    }
  }
};
</script>
